<template>
  <div>
    <div class="page-header">
      <span class="a1">&nbsp;姓名：</span>
      <span><Input v-model="aa" placeholder="请输入姓名" clearable style="width: 200px"/></span>
      &nbsp;&nbsp;&nbsp; <span class="a1">身份证号：</span>
      <span><Input v-model="bb" placeholder="请输入身份证号" clearable style="width: 200px"/></span>
      &nbsp;&nbsp;&nbsp;<span class=""> <Button type="primary" class="chaxun" @click="chaxun()">查询</Button></span>
      &nbsp;&nbsp;&nbsp;<span class="">   <Button type="primary" class="tianjia" @click="tianjia()">添加</Button></span>
    </div>
    <div class="div2">
      <Row>
        <Col span="24" class="lyx-mb10">
          <Table border ref="selection" :columns="columns4" :data="data2">

            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="cz">
              <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">详情
              </Button>
              <Button type="success" size="small" style="margin-right: 5px" @click="xiugai(row)">编辑
              </Button>
              <Button type="error" size="small" @click="remove(index)">删除</Button>
            </template>

          </Table>
        </Col>
      </Row>
    </div>
    <div class="fenye">
      <Row type="flex" justify="space-between" class="lyx-mb10">
        <Col span="24">
          <Page :total="40" show-total/>
        </Col>
      </Row>
    </div>
    <div class="tianjia">
      <Modal v-model="modal2" title="社区人员台账" width="50">
        <Row>
          <div id="id1">
            <Col span="10" offset="1">
              姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<Input v-model="obj.name" placeholder="请输入姓名" clearable style="width: 200px"/>
            </Col>
            <Col span="10" offset="3">
              性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
              <Select v-model="obj.sex" style="width:200px">
                <Option v-for="item in sexList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>

            </Col>
          </div>
        </Row>

        <Row>
          <div id="id2">
            <Col span="10" offset="1">
              年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄： <Input v-model="obj.old"   placeholder="年龄" clearable style="width: 200px"/>
            </Col>
            <Col span="10" offset="3">
              身份证号： <Input v-model="obj.idcard" placeholder="身份证号" clearable style="width: 200px"/>
            </Col>
          </div>
        </Row>

        <Row>
          <div id="id3">

            <Col span="10" offset="1">

              办&nbsp;公&nbsp;电&nbsp;&nbsp;话：<Input
              v-model="obj.tel" placeholder="办公电话" clearable style="width: 200px"/>
            </Col>
            <Col span="10" offset="3">
              政治面貌： <Input v-model="obj.mianmao" placeholder="政治面貌" clearable style="width: 200px"/>
            </Col>
          </div>
        </Row>

        <Row>
          <div id="id4">

            <Col span="10" offset="1">

              社&nbsp;区&nbsp;职&nbsp;&nbsp;务：<Input v-model="obj.zhiwu" placeholder="社区职务" clearable
                                                  style="width: 200px"/>
            </Col>
            <Col span="10" offset="3">
              出生日期：   <DatePicker type="date" placeholder="请选择出生日期" style="width: 200px" v-model="obj.date" @on-change="shijian"></DatePicker>
            </Col>
          </div>
        </Row>
        <Row>
          <div id="id5">
            <Col span="10" offset="1">
              学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：<Input v-model="obj.xueli" placeholder="请输入学历" clearable style="width: 200px"/>
            </Col>
            <Col span="10" offset="3">
              专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：
              <Input v-model="obj.zhuanye" placeholder="请输入专业" clearable style="width: 200px"/>
            </Col>
          </div>
        </Row>
        <div slot="footer">
          <Button type="primary" @click="ok">确定</Button>
          <Button style="margin-left: 8px" @click="closeModal">取消</Button>
        </div>
      </Modal>
    </div>
    <!--    //*******************************************************************************************************************************************************-->
    <div class="tianjia">
      <Modal v-model="modal1" title="查看详情" width="50">
<center>
        <Row>
          <div id="id1">
            <Col span="10" offset="1">
              姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<Input v-model="obj.name" placeholder="请输入姓名"  style="width: 200px" readonly/>
            </Col>
            <Col span="10" offset="2">
              性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
            <!--  <Select v-model="obj.sex" style="width:200px" readonly>
                <Option v-for="item in sexList" :value="item.value" :key="item.value" readonly>{{ item.label }}</Option>
              </Select>-->
              <Input v-model="obj.sex" placeholder="请输入姓名"  style="width: 200px" readonly/>

            </Col>
          </div>
        </Row>

        <Row>
          <div id="id2">
            <Col span="10" offset="1">
              年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄： <Input v-model="obj.old"   placeholder="年龄"  style="width: 200px" readonly/>
            </Col>
            <Col span="10" offset="2">
              身份证号： <Input v-model="obj.idcard" placeholder="身份证号" style="width: 200px" readonly/>
            </Col>
          </div>
        </Row>

        <Row>
          <div id="id3">

            <Col span="10" offset="1">

              办&nbsp;公&nbsp;电&nbsp;&nbsp;话：<Input
              v-model="obj.tel" placeholder="办公电话"  style="width: 200px" readonly/>
            </Col>
            <Col span="10" offset="2">
              政治面貌： <Input v-model="obj.mianmao" placeholder="政治面貌"  style="width: 200px" readonly/>
            </Col>
          </div>
        </Row>

        <Row>
          <div id="id4">

            <Col span="10" offset="1">

              社&nbsp;区&nbsp;职&nbsp;&nbsp;务：<Input v-model="obj.zhiwu" placeholder="社区职务"  readonly
                                                  style="width: 200px"/>
            </Col>
            <Col span="10" offset="2">
              出生日期：   <DatePicker type="date" placeholder="请选择出生日期" style="width: 200px" v-model="obj.date" @on-change="shijian" readonly></DatePicker>
            </Col>
          </div>
        </Row>
        <Row>
          <div id="id5">
            <Col span="10" offset="1">
              学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：<Input v-model="obj.xueli" placeholder="请输入学历"  style="width: 200px" readonly/>
            </Col>
            <Col span="10" offset="2">
              专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：
              <Input v-model="obj.zhuanye" placeholder="请输入专业"  style="width: 200px" readonly/>
            </Col>
          </div>
        </Row>
</center>
        <div slot="footer">
          <Button type="primary" @click="ok2">确定</Button>
          <!--  <Button style="margin-left: 8px" @click="closeModal">取消</Button>-->
        </div>
      </Modal>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {

      state: 0,
      sexList: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      modal1: false,
      aa: '',
      bb: '',
      data2: [],
      modal2: false,

      columns4: [
        {
          title: '序号',
          key: 'xuhao',
          /*  width: 65, */
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          // width: 65,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          // width: 65,
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'idcard',
          width: 160,
          align: 'center'
        },
        {
          title: '社区职务',
          key: 'zhiwu',
          // width: 160,
          align: 'center'
        },
        {
          title: '电话',
          key: 'tel',
          // width: 115,
          align: 'center'
        },
        {
          title: '学历',
          key: 'xueli',
          // width: 65,
          align: 'center'
        },

        {
          title: '操作',
          slot: 'cz',
          minWidth: 80,
          align: 'center'
        }
      ],
      data1: [
        {
          xuhao: 1,
          name: '李俊辉',
          sex: '男',
          idcard: '211222188502548747',
          zhiwu: '书记',
          tel: '17640232587',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 2,
          name: '王淑琴',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '主任助理',
          tel: '15898256321',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 3,
          name: '刘新辉',
          sex: '男',
          idcard: '211222188502548747',
          zhiwu: '后备干部',
          tel: '17640258987',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 4,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '安全员',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 5,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '公益岗位',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 6,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 7,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 8,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 9,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        },
        {
          xuhao: 10,
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19'

        }
      ],
      obj: {
        name: '',
        sex: '',
        old: '',
        idcard: '',
        tel: '',
        mianmao: '',
        zhiwu: '',
        date: '',
        xueli: '',
        zhuanye: '',
        xuhao: 10
      }

    }
  },
  methods: {
    remove (index) {
      if (confirm('确定要删除吗') === true) {
        alert(index)
        this.data2.splice(index, 1)
      }
    },
    shijian (data) {
      this.obj.date = data
    },

    show (row) {
      this.obj = row
      this.modal1 = true
    },
    xiugai (row) {
      this.state = 0
      this.obj = row
      this.modal2 = true
    },
    ok () {
      if (this.state === 1) {
        this.obj.xuhao = this.data2.length
        this.obj.xuhao++
        this.data2.push(this.obj)
        this.modal2 = false
        this.$Message.success('添加成功')
      } else {
        this.modal2 = false
        this.$Message.success('编辑成功')
      }
    },
    ok2 () {
      this.modal1 = false
    },
    closeModal () {
      this.modal2 = false
    },
    tianjia () {
      this.state = 1
      // this.obj.xuhao = '10'
      // this.obj.xuhao++
      // alert(this.obj.xuhao)
      this.obj = {}
      this.modal2 = true
    },
    chaxun () {
      //  支持模糊查询
      //  this.xmgcqkJsonsData：用于搜索的总数据
      this.data2 = []
      let search = this.aa
      let search2 = this.bb
      let newListData = [] //  用于存放搜索出来数据的新数组
      if (search && search2) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1 && item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search2) {
        this.data1.filter(item => {
          if (item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else {
        this.data2 = this.data1
      }
      newListData.filter(item => {
        this.data2.push(item)
      })
      // console.log(newListData)
    }

  },
  created () {
    // this.obj.xuhao = 10
    this.data2 = this.data1
  },
  mounted () {
    // this.obj.xuhao = 10
  }

}
</script>

<style scoped>
  .a1{
    /*font-weight: bold;*/
  }
  .page-header{
    margin-left: 5%;
  }

  .div2 {
    margin-top: 20px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    flex-direction: row-reverse;
  }

  #id2 {
    margin-top: 10px;

  }

  #id3 {
    margin-top: 10px;

  }

  #id4 {
    margin-top: 10px;

  }

  #id5 {
    margin-top: 10px;

  }

</style>
